@use "sass:math";
//region input-widget
@mixin input-widget(
	$-prefix,
	$-font-size,
	$-padding,
	$-color,
	$-hint-color,
	$-disabled-opacity,
){
	.#{$-prefix}_inputWrap{
		position:relative;
		width:100%;
		height:1.5em;
		line-height:1.5;
		margin:$-padding;
		font-size:$-font-size;
		color:$-color;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		&.pf--empty{
			color:$-hint-color;
			user-select:none;
			.#{$-prefix}.pf--disabled &{
				opacity:0;
			}
		}
	}
	.#{$-prefix}_input{
		position:absolute;
		left:0;
		top:0;
		height:100%;
		line-height:1.5;
		width:100%;
		font-size: $-font-size;
		color: $-color;
		@include native-input-normal;
	}
}
//endregion
//region native-input-normal
@mixin native-input-normal{
	outline:0;
	border:0;
	padding:0;
	background:none;
	&::-ms-clear,&::-ms-reveal{
		display:none;
	}
}
//endregion
//region input-widget-wrap
@mixin input-widget-wrap(
	$-height,
	$-active-color,
	$-border-color,
	$-disabled-color,
	$-disabled-opacity,
	$-radius,
	$-round-padding,
	$-transition,
	$-shadow,
	$-real,
	$-vertical-align,
	$-shadow-class:pf--focus,
){
	display:inline-flex;
	align-items:center;
	width:100%;
	height: $-height;
	background:#fff;
	border:1px solid $-border-color;
	border-radius: $-radius;
	transition: $-transition;
	transition-property:border-color,box-shadow;
	vertical-align: $-vertical-align;
	&:hover{
		border-color: $-active-color;
	}
	&.#{$-shadow-class}{
		border-color: $-active-color;
		box-shadow: $-shadow;
	}
	&.pf--shape-round{
		border-radius: math.div($-height,2);
		padding:0 $-round-padding;
	}
	&.pf--shape-noBorder{
		border:0;
		background:transparent;
		box-shadow:none;
	}
	&.pf--disabled{
		border-color: $-border-color;
		background: $-disabled-color;
		&,.#{$-real}{
			cursor:not-allowed;
		}
		.#{$-real}{
			opacity: $-disabled-opacity;
		}
	}
	&.pf--readonly{
		.#{$-real}{
			cursor:default;
		}
	}
}
//endregion
//region disabled-mask
@mixin disabled-mask(
	$-round:false,
	$-opacity:0.5,
){
	cursor:not-allowed;
	&:after{
		content:'';
		position:absolute;
		width:100%;
		height:100%;
		background:#fff;
		opacity:$-opacity;
		left:0;
		top:0;
		@if $-round{
			border-radius:$-round;
		}
	}
}
//endregion
//region popup-menu
@mixin popup-menu(
	$-radius,
	$-background,
	$-color,
	$-font-size,
	$-box-shadow,
){
	position:relative;
	max-width:100vw;
	max-height:100vh;
	border-radius:$-radius;
	background:$-background;
	color:$-color;
	font-size:$-font-size;
	box-shadow:$-box-shadow;
	pointer-events:initial;
	overflow:hidden;
	z-index:1;
}
//endregion